<!--
  ~ Copyright (c) 2018 United States Government as represented by the Administrator of the
  ~ National Aeronautics and Space Administration. All Rights Reserved.
  -->

<!--
  ~ Copyright (c) 2018 United States Government as represented by the Administrator of the
  ~ National Aeronautics and Space Administration. All Rights Reserved.
  -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Paths Tutorial</title>
    <script src="file:///android_asset/codemirror-5.16.0/lib/codemirror.js" type="text/javascript"></script>
    <script src="file:///android_asset/codemirror-5.16.0/mode/clike/clike.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="file:///android_asset/codemirror-5.16.0/lib/codemirror.css"/>
    <link rel="stylesheet" type="text/css" href="file:///android_asset/override.css"/>
</head>
<body>
<h1>Ellipse Tutorial</h1>
<p>
    Demonstrates how to add an Ellipse to a RenderableLayer.
</p>
<p>
    This example renders six different ellipses on the globe.
<ul>
    <li>The Northwestern ellipse demonstrates the default styling and configuration.</li>
    <li>The Northeastern ellipse uses custom attributes.</li>
    <li>The Western ellipse has a 45 degree heading.</li>
    <li>The Eastern ellipse displays a circle.</li>
    <li>The Southwestern ellipse is at an altitude of 200km.</li>
    <li>The Southeastern ellipse is at an altitude of 200km, extrude, and custom attributes.</li>
</ul>
</p>
<h2>Example</h2>
<h3>EllipseFragment.java</h3>
<p>
    The EllipseFragment class extends the BasicGlobeFragment and overrides the createWorldWindow method.
    Here we create and add a RenderableLayer to the globe, and then define and add ellipses to the layer.
</p>
<div style="border-top: 1px solid black; border-bottom: 1px solid black;">
    <textarea id="java-code">
package gov.nasa.worldwindx;
...
public class EllipseFragment extends BasicGlobeFragment {

    /**
     * Creates a new WorldWindow (GLSurfaceView) object with a set of Ellipse shapes
     *
     * @return The WorldWindow object containing the globe.
     */
    @Override
    public WorldWindow createWorldWindow() {
        // Let the super class (BasicGlobeFragment) do the creation
        WorldWindow wwd = super.createWorldWindow();

        // Create a layer in which to display the ellipse shapes. In this tutorial, we use a new instance of
        // RenderableLayer. Like all Renderable objects, Ellipse shapes may be organized into any arrangement of layers.
        RenderableLayer tutorialLayer = new RenderableLayer();
        wwd.getLayers().addLayer(tutorialLayer);

        // Create a surface ellipse with the default attributes, a 500km major-radius and a 300km minor-radius. Surface
        // ellipses are configured with a CLAMP_TO_GROUND altitudeMode and followTerrain set to true.
        Ellipse ellipse = new Ellipse(new Position(45, -120, 0), 500000, 300000);
        ellipse.setAltitudeMode(WorldWind.CLAMP_TO_GROUND); // clamp the ellipse's center position to the terrain surface
        ellipse.setFollowTerrain(true); // cause the ellipse geometry to follow the terrain surface
        tutorialLayer.addRenderable(ellipse);

        // Create a surface ellipse with with custom attributes that make the interior 50% transparent and increase the
        // outline width.
        ShapeAttributes attrs = new ShapeAttributes();
        attrs.setInteriorColor(new Color(1, 1, 1, 0.5f)); // 50% transparent white
        attrs.setOutlineWidth(3);
        ellipse = new Ellipse(new Position(45, -100, 0), 500000, 300000, attrs);
        ellipse.setAltitudeMode(WorldWind.CLAMP_TO_GROUND); // clamp the ellipse's center position to the terrain surface
        ellipse.setFollowTerrain(true); // cause the ellipse geometry to follow the terrain surface
        tutorialLayer.addRenderable(ellipse);

        // Create a surface ellipse with a heading of 45 degrees, causing the semi-major axis to point Northeast and the
        // semi-minor axis to point Southeast.
        ellipse = new Ellipse(new Position(35, -120, 0), 500000, 300000);
        ellipse.setAltitudeMode(WorldWind.CLAMP_TO_GROUND); // clamp the ellipse's center position to the terrain surface
        ellipse.setFollowTerrain(true); // cause the ellipse geometry to follow the terrain surface
        ellipse.setHeading(45);
        tutorialLayer.addRenderable(ellipse);

        // Create a surface circle with the default attributes and 400km radius.
        ellipse = new Ellipse(new Position(35, -100, 0), 400000, 400000);
        ellipse.setAltitudeMode(WorldWind.CLAMP_TO_GROUND); // clamp the ellipse's center position to the terrain surface
        ellipse.setFollowTerrain(true); // cause the ellipse geometry to follow the terrain surface
        tutorialLayer.addRenderable(ellipse);

        // Create an ellipse with the default attributes, an altitude of 200 km, and a 500km major-radius and a 300km
        // minor-radius.
        ellipse = new Ellipse(new Position(25, -120, 200e3), 500000, 300000);
        tutorialLayer.addRenderable(ellipse);

        // Create an ellipse with custom attributes that make the interior 50% transparent and an extruded outline with
        // vertical lines
        attrs = new ShapeAttributes();
        attrs.setInteriorColor(new Color(1, 1, 1, 0.5f)); // 50% transparent white
        attrs.setDrawVerticals(true);
        ellipse = new Ellipse(new Position(25, -100, 200e3), 500000, 300000, attrs);
        ellipse.setExtrude(true);
        tutorialLayer.addRenderable(ellipse);

        return wwd;
    }
}
    </textarea>
</div>

<script type="text/javascript">
      var javaEditor = CodeMirror.fromTextArea(document.getElementById("java-code"), {
        lineNumbers: true,
        matchBrackets: true,
        mode: "text/x-java",
        readOnly: true
      });





</script>
</body>
</html>